<template>
  <div class="containerChild">
    <div class="title">
      <span>会计分录</span>
      <el-date-picker
        v-model="selMonth"
        type="month"
        placeholder="选择月份"
        value-format="YYYY-MM"
        @change="getFileList"
      />
      <el-button v-if="isShow" type="primary" size="small">重新上传</el-button>
    </div>
    <div class="loadBox" v-if="!isShow">
      <!-- ,.jpeg,.png,.jpg,.bmp,.gif -->
      <el-upload
        :action="uploadActionUrl"
        list-type="picture-card"
        :show-file-list="true"
        accept=".pdf"
        :limit="1"
        :on-change="uploadPdf"
        :on-remove="handleRemove"
        :file-list="fileList"
        :class="{ disablePdf: pdfDisable }"
        :data="excdata"
      >
        <el-icon>
          <Plus />
        </el-icon>
        <template #file="{ file }">
          <div>
            <div class="pdfBox">
              <img
                v-if="
                  file.raw
                    ? `${file.raw.type === 'application/pdf'}`
                    : `${file.type === 'application/pdf'}`
                "
                class="el-upload-list__item-thumbnail"
                src="@/assets/img/PDF1.png"
                alt=""
              />
              <img
                v-else
                class="el-upload-list__item-thumbnail"
                :src="file.url"
                alt=""
              />

              <span>{{ file.name }}</span>
            </div>
            <span class="el-upload-list__item-actions">
              <span class="el-upload-list__item-preview" @click="gotoPdf(file)">
                <el-icon><zoom-in /></el-icon>
              </span>
              <!-- <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                <el-icon>
                  <Download />
                </el-icon>
              </span> -->
              <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleRemove(file)"
              >
                <el-icon>
                  <Delete />
                </el-icon>
              </span>
            </span>
          </div>
        </template>
      </el-upload>
    </div>
    <el-dialog v-model="dialogVisible">
      <img class="previewImg" w-full :src="dialogImageUrl" alt="图片预览" />
    </el-dialog>
  </div>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { ref, onMounted } from "vue";
import { getPdf } from "@/api/getList.js";
const selMonth = ref();
const isShow = ref(false);
selMonth.value = history.state.month;
const fileList = ref([]);
const dialogImageUrl = ref("");
const dialogVisible = ref(false);
const disabled = ref(false);
const pdfDisable = ref(false);
const pdfUrl = ref("");
const src = ref("");
const uploadActionUrl = import.meta.env.VITE_GLOB_BASE_URL + "finance/upload";
const excdata = ref({});
const handleRemove = (file, uploadFiles) => {
  pdfDisable.value = false;
  fileList.value = fileList.value.filter((item) => {
    return item.url !== file.url && item.name !== file.name;
  });
};
function uploadPdf(file, uploadFiles) {
  pdfUrl.value = file.url;
  fileList.value = uploadFiles;
  if (`${file.raw.type === "application/pdf"}`) {
    src.value = "@/assets/img/PDF1.png";
  }
  if (fileList.value.length >= 1) {
    pdfDisable.value = true;
  }
}
function gotoPdf(file) {
  window.open(file.url);
}
const getFileList = () => {
  fileList.value = [];
  const data = {
    file_type: 6,
    file_month: selMonth.value,
  };
  excdata.value = {
    file_type: 6,
    month: selMonth.value,
  };
  getPdf(data).then((res) => {
    if (res.result === "fail") {
      ElMessage.error("文件不存在，请上传！");
      pdfDisable.value = false;
    } else {
      fileList.value = [
        {
          name: res.data.file_name,
          url: res.data.url,
        },
      ];
      pdfDisable.value = true;
    }
  });
};
onMounted(() => {
  getFileList();
});
</script>

<style lang="less" scoped>
.containerChild {
  height: calc(100vh - 142px);
  background: @mainColor;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: flex-start;

  .title {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;

    span {
      margin: 1vw;
    }

    .el-button {
      margin: 1vw;
    }
  }

  .loadBox {
    display: flex;
  }

  // .upload-demo {
  //   // position: absolute;
  //   // left: 50%;
  //   // top: 50%;
  // }
}

.luckysheet-wrap {
  position: sticky;
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
}

.pdfBox {
  font-size: 12px;
  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: center;
  white-space: normal;
  text-overflow: ellipsis;
  overflow: hidden;

  img {
    width: 4vw;
    height: 5vw;
  }

  span {
    margin: 10px;
  }
}

.previewImg {
  width: 100%;
  height: 100%;
}
:deep(.title) {
  width: 25vw;
}
.disablePdf /deep/.el-upload--picture-card {
  display: none;
}
</style>
<!-- <template>
  <div class="upload">
    <input id="uploadBtn" type="file" @change="loadExcel" />
    <div id="luckysheet" class="luckysheet"></div>
  </div>
</template> -->

<!-- <script setup>
import { onMounted, reactive, ref } from 'vue'
import LuckyExcel from 'luckyexcel'
const dialogTableVisible = ref(false)
onMounted(() => {
  // 如果这里luckysheet.create报错
  // 请使用 window.luckysheet.create
  luckysheet.create({
    container: 'luckysheet'// 这里需要和容器的id名称一致
  })

  // 从后端接口获取 excel 文件使用
  loadExcel()
})

// 按钮上传使用，注意区分
const loadExcel = (evt) => {
  const files = evt.target.files
  if (files == null || files.length == 0) {
    alert('请上传文件')
    return
  }
  const name = files[0].name
  const suffixArr = name.split('.')
  const suffix = suffixArr[suffixArr.length - 1]
  if (suffix != 'xlsx' && suffix != 'xls') {
    alert('只能导入xlsx文件格式的Excel')
    return
  }
  LuckyExcel.transformExcelToLucky(files[0], function (exportJson, luckysheetfile) {
    if (exportJson.sheets == null || exportJson.sheets.length == 0) {
      alert('导入失败!')
      return
    }
    window.luckysheet.destroy()
    window.luckysheet.create({
      container: 'luckysheet', // 容器的Id
      showinfobar: false,
      data: exportJson.sheets,
      title: exportJson.info.name,
      userInfo: exportJson.info.name.creator
    })
  })
}
</script>
<style scoped>
.luckysheet {
  margin: 0;
  padding: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 30px;
  /* 调整此值以向下移动 */
}

/* .upload {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
} */
</style> -->
